@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;
@use 'src/scss/gio-layout' as gio-layout;

.gio-instance-details-monitoring {
  @include gio-layout.gio-responsive-content-container;

  display: grid;
  grid-gap: 16px;
  padding: 16px;

  &__main-indicators {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-gap: 1rem;

    & > .mat-mdc-card > * {
      margin-top: auto;
    }

    & gio-circular-percentage {
      margin: auto;
    }

    &__card {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: center;

      &__value {
        font-size: 30px;
        line-height: 30px;
        color: #1f77b4;
      }
    }
  }

  &__card-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  &__jvm {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;

    &__pool {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      grid-gap: 16px;
      margin: 8px;

      &__progress-bar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 32px;
      }
    }
  }

  &__indicators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-gap: 16px;

    &__sublist {
      text-align: right;
      color: mat.get-color-from-palette(gio.$mat-space-palette, default);
    }
  }

  &__load-average {
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
  }
}
